<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子组件向父组件传值</title>
    <script src="js/vue.js"></script>
    <style>
        .itemStyle{
            border: 1px dashed #000;
            border-radius: 15px;
            padding: 10px;
            width: 220px;
            height: 260px;
            text-align: center;
            float: left;
            margin-right: 50px;
            margin-bottom: 50px;
            box-shadow:10px 10px 5px #888888;
        }
        .itemFont{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis; 
            line-height: 32px;
        }

    </style>
</head>
<body>
    <template id="listTemplate">
        <div>
            <div style="background-color: greenyellow; margin-top: 30px;margin-left: 50px;">
                {{msg}}
            </div>
            <div>
                <!--
                    第2步：在父组件的template中引入子组件的控件开始标签处使用
                    @自定义事件="方法"
                -->
                <lessionitem pic="images/model2.png" 
                             title="第一阶段：Java核心编程" 
                             desc="知识要点：环境搭建，基本数据类型，变量及去声明，运算符，流程控制语句，IDE绘制界面"
                             headimg="images/0.jpg"
                             tname="蒲旭波"
                             count="22"
                             @receive="getVal"></lessionitem>
                <lessionitem pic="images/model1.jpg" 
                             title="第四阶段：Web前端框架" 
                             desc="知识要点：Bootstrap前端框架、VUE前端框架"
                             headimg="images/zhaijizhe.jpg"
                             tname="翟吉喆"
                             count="20"
                             @receive="getVal"></lessionitem>
            </div>
        </div>
      
        
    </template>
    <template id="itemTemplate">
        <div class="itemStyle">
            <div>
                <img :src="pic" width="200px" height="114px">
            </div>
            <div>
                <div class="itemFont">
                    {{title}}
                </div>
                <div class="itemFont" style="color:#999">
                    {{desc}}
                </div>
                <div style="color:red;text-align: right;margin-right: 15px;">
                    <a @click="appointment">预约课程</a>
                </div>
                <div>
                    <img :src="headimg" width="20px" height="20px">
                    <span>{{tname}}</span>
                    <span>{{count}}</span>
                </div>
            </div>
        </div>
    </template>
    <div id="app">
        <lessionlist></lessionlist>
    </div>
</body>
</html>
<script>
    var vm=new Vue({
        el:'#app',
        components:{
            'lessionlist':{
                template:'#listTemplate',
                data() {
                    return {
                        msg:''
                    }
                },
                methods: {
                    //第3步：在父组件的方法中，直接获取到值
                    getVal(val){
                        var content=val;
                        var array=content.split(",");
                        var tname=array[0];
                        var lessionName=array[1];
                        var count=parseInt(array[2]);
                        var message="您已经成功的预约了"+tname+"老师的"+lessionName+"目前该课程已约人数为"+(parseInt(count+1))+"人";
                        this.msg=message;
                    }
                },
                components:{
                    'lessionitem':{
                        template:'#itemTemplate',
                        //props数组中的变量不能使用大写
                        props:["pic","title","desc","headimg","tname","count"],
                        methods: {
                            appointment(){
                                var tname=this.tname;
                                var title=this.title;
                                var count=this.count;
                                var content=tname+","+title+","+count;
                                /*
                                通过$emit方法将子组件中的内容可以传递到父组件，该方法的第一个参数是自定义事件，第2个参数则是子组件中的数据
                                */
                                this.$emit('receive',content);
                            }
                        },  
                    }
                }
            }
        }
    });
</script>